<script>

function renderSubLayout (h, ctx) {
  return h('a-layout', [h('a-layout-header', {
    style: 'background: #fff; padding:0px 20px'
  }, [h('a-icon', {
    class: 'zh-nav-trigger',
    props: {
      type: ctx.collapsed ? 'menu-unfold' : 'menu-fold'
    },
    on: {
      click () {
      }
    }
  })]), h('a-layout-content', {
    style: { margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }
  })])
}

function renderMenuItem (h, menuItem) {
  if (menuItem.hidden) {
    return null
  }
  if (menuItem.children) {
    const notHideNode = menuItem.children.find(child => !child.hidden)
    if (notHideNode) {
      return renderSubMenu(h, menuItem)
    }
  }
  return h('a-menu-item', {
    key: menuItem.id
  }, [
    renderIcon(h, menuItem.icon),
    renderTitle(h, menuItem.title),
    renderBadge(h, menuItem.badge)
  ])
}

function renderSubMenu (h, menuItem) {
  return h('a-sub-menu', {
    key: menuItem.id,
    attrs: {
      title: h('span', [
        renderIcon(h, menuItem.icon),
        renderTitle(h, menuItem.title),
        renderBadge(h, menuItem.badge)
      ])
    }
  }, [menuItem.children.map(menu => renderMenuItem(h, menu))])
}

function renderIcon (h, icon) {
  if (icon === undefined || icon === 'none' || icon === null || icon === '') {
    return null
  }

  var props = {}
  typeof icon === 'object' ? props.component = icon : props.type = icon
  return h('a-icon', {
    props: props
  })
}

function renderTitle (h, title) {
  return h('span', [title])
}

function renderBadge (h, badge) {
  return badge ? h('a-badge', {
    attrs: {
      count: badge.count,
      dot: !!badge.dot
    }
  }) : null
}

export default {
  data () {
    return {
      menuTree: this.$store.getMenu(),
      collapsed: false
    }
  },
  render (h) {
    // return h('a-layout', {
    //   attrs: {
    //     id: 'zh-basic-layout-default'
    //   }
    // }, [h('a-layout-sider', {
    //   class: 'zh-menu-sider',
    //   props: {
    //     collapsed: this.collapsed
    //   }
    // }, [h('div', {
    //   class: 'logo'
    // }), h('a-menu', {
    //   style: 'width: 100%',
    //   props: {
    //     theme: 'dark',
    //     mode: 'inline'
    //   },
    //   on: {
    //     select (item) {
    //       // 点击菜单
    //     },
    //     openChange (openKeys) {

    //     }
    //   }
    // }, [this.menuTree.map(menu => renderMenuItem(h, menu))])]), renderSubLayout(h, this)])
    return h('a-layout', {
      attrs: {
        id: 'zh-basic-layout-default'
      }
    }, [h('a-layout-sider', {
      class: 'zh-menu-sider',
      props: {
        collapsed: this.collapsed
      }
    }, [h('div', {
      class: 'logo'
    }), h('a-menu', {
      style: 'width: 100%',
      props: {
        theme: 'dark',
        mode: 'inline'
      },
      on: {
        select (item) {
          // 点击菜单
        },
        openChange (openKeys) {

        }
      }
    }, [this.menuTree.map(menu => renderMenuItem(h, menu))])]),
    renderSubLayout(h, this)
    ])
  }
}
</script>

<style lang="less" scoped>
#zh-basic-layout-default {
  .zh-menu-sider {
    box-shadow: 2px 0 6px #00152959;
    position: relative;
    min-height: 100vh;
    flex: 0 0 256px !important;
    max-width: 256px !important;
    min-width: 256px !important;
    width: 256px !important;
  }
  .zh-nav-trigger {
    font-size: var(--font-size-20);
  }
  .logo {
    height: 64px;
    background: rgba(255, 255, 255, 0.2);
  }
  .ant-layout-header {
    height: 64px;
  }
}
</style>